/*
 * @Author: your name
 * @Date: 2021-12-16 17:54:05
 * @LastEditTime: 2021-12-16 18:14:45
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \first_one_file\react-travel\src\components\productCollection\ProductCollection.tsx
 */
import React from 'react';
import styles from './ProductCollection.module.css';
import {
  Row,
  Col,
  Divider
} from 'antd';
import { ProductImage } from './ProductImage';

interface PropsType {
  title: JSX.Element;
  sideImage: string;
  products: any[];
}

export const ProductCollection: React.FC<PropsType> = ({ title, sideImage, products }) => {
  return <div className={styles.content}>
    <Divider orientation='left'>{title}</Divider>
    <Row>
      <Col span={4}>
        <img src={sideImage} className={styles['side-image']} alt="" />
      </Col>
      <Col span={20}>
        <Row>
          <Col span={12}>
            <ProductImage
              id={products[0].id}
              size={"large"}
              title={products[0].title}
              imageSrc={products[0].touristRoutePictures[0].url}
              price={products[0].price}
            />
          </Col>
          <Col span={12}>
            <Row>
              <Col span={12}>
                <ProductImage
                  id={products[1].id}
                  size="small"
                  title={products[1].title}
                  imageSrc={products[1].touristRoutePictures[0].url}
                  price={products[1].price}
                />
              </Col>
              <Col span={12}>
                <ProductImage
                  id={products[2].id}
                  size="small"
                  title={products[2].title}
                  imageSrc={products[2].touristRoutePictures[0].url}
                  price={products[2].price}
                />
              </Col>
            </Row>
            <Row>
              <Col span={12}>
                <ProductImage
                  id={products[3].id}
                  size="small"
                  title={products[3].title}
                  imageSrc={products[3].touristRoutePictures[0].url}
                  price={products[3].price}
                />
              </Col>
              <Col span={12}>
                <ProductImage
                  id={products[4].id}
                  size="small"
                  title={products[4].title}
                  imageSrc={products[4].touristRoutePictures[0].url}
                  price={products[4].price}
                />
              </Col>
            </Row>
          </Col>
        </Row>
        <Row>
          <Col span={6}>
            <ProductImage
              id={products[5].id}
              size="small"
              title={products[5].title}
              imageSrc={products[5].touristRoutePictures[0].url}
              price={products[5].price}
            />
          </Col>
          <Col span={6}>
            <ProductImage
              id={products[6].id}
              size="small"
              title={products[6].title}
              imageSrc={products[6].touristRoutePictures[0].url}
              price={products[6].price}
            />
          </Col>
          <Col span={6}>
            <ProductImage
              id={products[7].id}
              size="small"
              title={products[7].title}
              imageSrc={products[7].touristRoutePictures[0].url}
              price={products[7].price}
            />
          </Col>
          <Col span={6}>
            <ProductImage
              id={products[8].id}
              size="small"
              title={products[8].title}
              imageSrc={products[8].touristRoutePictures[0].url}
              price={products[8].price}
            />
          </Col>
        </Row>
      </Col>
    </Row>
  </div>
}
